// 获取分类数据列表
const form = layui.form
axios.get('/my/article/cates').then(res => {
    $('#cateSelect').append(res.data.data.map(item => `
    <option value="${item.Id}">${item.name}</option>
    `).join(''))
    form.render('select')
})


// todo : 富文本编辑效果
const E = window.wangEditor
const editor = new E("#contentBox")
// 或者 const editor = new E(document.getElementById('div1'))
editor.config.zIndex = 500
editor.create()



// todo 裁剪区域
// 1. 获取裁剪区域的 DOM 元素
let $image = $(".container img");

// 2. 裁剪选项
let options = {
    aspectRatio: 400 / 280,
    preview: '.preview'
}

// 3. 初始化裁剪区域
$image.cropper(options)



// todo 选择封面
$('#btnChooseCoverImage').on('click', function () {
    $('#fileCover').click()
})


// 更换裁剪区域照片
/*
步骤：
1.给文件选择框注册change事件
2.获取都用户选择的文件   文件对象
3.需要把文件对象 转 img图片地址

*/
$('#fileCover').on('change', function () {
    const file = this.files[0]
    if (!file) return

    // 需要把文件对象 转 img图片地址
    const imgSrc = URL.createObjectURL(file)
    console.log(imgSrc);

    // 需要先销毁旧的裁切区域 之后按照新的图片地址来生成新的
    // 3. 更换剪裁区的图片的src属性
    // - 销毁原理的剪裁区
    // - 更换图片
    // - 重新创建剪裁区
    $image.cropper('destroy').attr('src', imgSrc).cropper(options);



})


// 发布或存为草稿功能
// 请求体（FormData 格式）：
$('#form').on('submit', async function (e) {
    e.preventDefault()
    const fd = new FormData(this)

    fd.append('content', editor.txt.html())

    // 收集文章状态
    fd.append('state', state)


    // 将裁剪后的图片，输出为文件
    $image
        .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
            width: 400,
            height: 280
        })
        .toBlob(async function (blob) {
            // 将 Canvas 画布上的内容，转化为文件对象
            // 得到blob文件对象后，进行后续的操作 ==> 通过 FormData来收集数据， ajax提交数据
            // console.log(blob)
            fd.append('cover_img', blob)
            fd.forEach((value, name) => {
                console.log(value, name)
            })
            const { data } = await axios.post('/my/article/add', fd)
            if (data.status !== 0) return layer.msg(data.message)
            // layer.msg(data.message)

            layer.msg(data.message, {
                icon: 1,
                time: 2000 //2秒关闭（如果不配置，默认是3秒）
            }, function () {
                //do something
                location.href = '/article/art_list.html'
            });
        })


})


// 文章状态的收集
/*
关键看点了什么按钮

*/

let state
$('#btnPublish').click(function () {
    state = '已发布'
})

$('#btnSave').click(function () {
    state = '草稿'
})